<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>科目汇总表</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="科目汇总表">
<meta name="description" content="科目汇总表">
<meta name="author" content="yinqi">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
</head>
  <style>
    .col-lg-12{
      margin: auto;
    top: 17px;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    /* width: 1200px; */
    width: 100%;
    }
  </style>
<body>
<div class="lyear-layout-web" id="app">
  <div class="lyear-layout-container">
    <!--左侧导航-->

    <!--End 左侧导航-->
    
    <!--头部信息-->
 
    <!--End 头部信息-->
    
    <!--页面主要内容-->

    <main class="lyear-layout-content" >
      <div class="container-fluid">
        
        <div class="row">
          <div class="col-lg-12" >
            <div class="card">
              <div class="card-toolbar clearfix">
                <h3 align="center">科目汇总表</h3>
                <form class="pull-right search-bar" method="get" action="#!" role="form">
                </form>
                <div class="toolbar-btn-action">
                  
                  <!-- <el-button  class="btn btn-danger" type="warning" style="background-color:#f96868;" @click="removeBatch(sels)" :disabled="this.sels.length === 0||this.disabled"><i class="mdi mdi-window-close"></i>批量删除</el-button> -->
                </div>
              </div>
              <div class="card-body">
                
                <div class="table-responsive">
                  <table class="table table-bordered">
                    <template>
                      <el-table
                        v-loading="loading"
                        element-loading-text="拼命加载中"
                        :data="list"
                        border
                        style="width: 100%">
                        <el-table-column
                          prop="jzKmId"
                          label="科目编号"
                          width="400"
                          >
                        </el-table-column>
                        <el-table-column
                          prop="km"
                          label="科目"
                          width="400"
                          >
                          <template slot-scope="scope">
                            <a href="detail account .html" @click="a(scope.row.km)">{{scope.row.km}}</a>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="jzJfprice"
                          label="借方金额"
                           class="jf"
                           width="400">
                        </el-table-column>
                        <el-table-column
                          prop="jzDfprice"
                          label="贷方金额"
                          width="382"
                          >
                        </el-table-column>
                      </el-table>
                      
                    </template>
                  </table>
                </div>
                <div style="width: 1585px;height: 50px;margin-top: -20px; border: 1px solid #ccc;border-top: none;">
                  <div style="width: 858px;height: 50px;float: left;">
                      <center><div style="padding-top: 10px;">
                        <h4>总计</h4>
                      </div></center>
                  </div>
                  <div style="width: 404px;height: 50px;float: left; margin-left: -50px;">
                    <div style="padding-top: 10px;">
                      <h4> {{sum}}</h4>
                    </div>
                  </div>
                  <div style="width: 240px;height: 50px;float: left;">
                    <div style="padding-top: 10px;">
                      <h4> {{sum1}}</h4>
                    </div>
                  </div>
                </div>
                <nav>
                  <ul class="pagination pagination-circle">
                    <li class="active"><a>{{totals}}</a></li>
                    <li>
                      <a type="button" @click="getlist(prePage)">
                        <span><i class="mdi mdi-chevron-left" ></i></span>
                      </a>
                    </li>
                    <li ><a>{{currentPage}}</a></li>
                    <li>
                      <a type="button" @click="getlist(nextPage)">
                        <span><i class="mdi mdi-chevron-right"></i></span>
                      </a>
                    </li>
                  </ul>
                </nav>  
              </div>
            </div>
          </div>
          
        </div>
        
      </div>
      
    </main>
    <!--End 页面主要内容-->
  </div>
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.6.9/vue.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
  new Vue({
    el:"#app",
  data:{
    list:[],
    menu:[],
    km:[],
    loading: false,
    credentialsLog:{
    },
    currentPage:1, //当前页码
    size:5, 
    totals:"",
    prePage:1,
    nextPage:1,
    totalPage:1, //总页数
    disabled:true,
    user:{},
    user1:{},
    roleid:"",
    menuup:{},
    sum:0,
    sum1:0,
  },
  created () {
    this.getlist(1);
  },
  methods: {
    a(km){
      sessionStorage.setItem("km",km)
    },
    getlist(currentPage){
      this.loading=true;
      setTimeout(() => {
      this.loading = false;
      axios.post("http://localhost:8888/accountBook/selectAllzz/"+this.currentPage+"/"+this.size,this.credentialsLog)
      .then(res => {
        // this.list = res.data
        console.log(res.data)
        this.list = res.data.p.rows;
        this.totals = res.data.p.total;
        this.sum = res.data.a;
        this.sum1 = res.data.b;
        this.currentPage = currentPage;
        this.totalPage = Math.ceil(this.totals/this.size);
        this.prePage = 
        currentPage>1?currentPage-1:currentPage;
        this.nextPage = currentPage<this.totalPage?currentPage+1:currentPage;
        //console.log(res.data)
      })
      .catch(err => {
        console.error(err); 
      })

       }, 1);
    },

      
  }
  })
</script>
</body>
</html>